<template>
    <div class="p-pagination">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="paginate.total_count" :page-size="paginate.page_size" :current-page="paginate.page"
            :page-sizes="pageSizeArray" @current-change="pageChange" @size-change="sizeChang" :hide-on-single-page="true">
        </el-pagination>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import { IPaginate, defaultPaginate } from "@/lib/IApp";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 每页多少条数据数组
     */
    pageSizeArray: number[];
    /**
     * 分页对象
     */
    paginate: IPaginate;
}
export default defineComponent({
    name: "PPagination",
    props: {
        modelValue: {
            type: Object,
            default: () => defaultPaginate,
        },
    },
    emits: ["update:modelValue", "change"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const state = reactive<IState>({
            pageSizeArray: [],
            paginate: defaultPaginate,
        });
        watch(
            () => props.modelValue,
            (val) => {
                state.paginate = val as IPaginate;
            }
        );
        onMounted(() => {
            state.paginate = props.modelValue as IPaginate;
            for (let i = 1; i <= 300; i++) {
                state.pageSizeArray.push(i);
            }
        });
        const pageChange = (currentPage: number) => {
            state.paginate.page = currentPage;
            emit("update:modelValue", state.paginate);
            emit("change", state.paginate);
        };
        const sizeChang = (sizechang: number) => {
            state.paginate.page_size = sizechang;
            emit("update:modelValue", state.paginate);
            emit("change", state.paginate);
        };
        return {
            UIAuth,
            bodySize,
            ...toRefs(state),
            pageChange,
            sizeChang,
        };
    },
});
</script>

<style lang="scss">
.p-pagination {
    & .el-input__inner,
    & .el-textarea__inner {
        border-color: $border-color1 !important;
    }
    & .el-input__inner:focus,
    & .el-textarea__inner:focus {
        border-color: $primary-color !important;
    }
    & .el-pagination .el-input__suffix {
        display: none;
    }
    & .el-pagination .el-select .el-input .el-input__inner {
        padding-right: 8px;
    }
}
</style>